// @ts-ignore
import {Component, useState, useEffect} from 'react'
// @ts-ignore
import {connect} from "react-redux";
import Taro, {usePullDownRefresh, useReachBottom} from "@tarojs/taro";
import {View, Image} from "@tarojs/components";

// 静态资源
import './index.scss'
// @ts-ignore
import moreIcon from '../../assets/images/my/more.png'


// 闲置商品
function GoodItem() {


    let [goodImg, setGoodImg] = useState('https://weiju-wechat.oss-cn-shenzhen.aliyuncs.com/IMG_20210808_203857.jpg')


    // 更多
    function handleMore() {
        Taro.showActionSheet({
            itemList: ['A', 'B', 'C'],
            success: function (res) {
                console.log(res.tapIndex)
            },
            fail: function (res) {
                console.log(res.errMsg)
            }
        })
    }

    return (
        <View className="good-item-container">

            {/* 商品信息 */}
            <View className="good-info-container">

                {/* 商品图片 */}
                <Image className="good-img" mode="aspectFill" src={goodImg}></Image>

                {/* 内容 价格 浏览量 想要 */}
                <View className="content-price-view-container">

                    {/* 内容 价格 */}
                    <View className="content-price-container">
                        <View className="content">上面装机服务，我装机带工具和一些装机系统软件</View>
                        <View className="price-container">
                            <View className="unit">￥</View>
                            <View className="price">80</View>
                        </View>
                    </View>

                    {/* 浏览量 想要 */}
                    <View className="view-count-container">
                        <View className="view-word">浏览量83</View>
                        <View className="view-word mgl20">想要3</View>
                    </View>

                </View>


            </View>

            {/* 功能按钮 */}
            <View className="function-btn-container">

                <View className="btn-container">降价</View>
                <View className="btn-container mgl20">编辑</View>
                <Image className="more-icon mgl20" onClick={handleMore} src={moreIcon}></Image>

            </View>

        </View>
    )
}


function MyIssue() {

    let [goodArrays, setGoodArrays] = useState([1, 2, 3, 4, 5, 6])

    // 下拉刷新
    usePullDownRefresh(() => {
        setGoodArrays([1, 2, 3, 4, 5, 6])
        Taro.stopPullDownRefresh()
    })

    // 上拉触顶
    useReachBottom(() => {
        let newGoodArrays : number[] = []

        let lastNum = goodArrays[goodArrays.length - 1]

        goodArrays.forEach(item => {
            newGoodArrays.push(item)
        })
        for (let i = 1; i < 5; i++) {
            newGoodArrays.push(lastNum + i)
        }

        setGoodArrays(newGoodArrays)

    })


    return (
        <View>

            {/* 闲置商品 */}
            {
                goodArrays.map(() => {
                    return (
                        <GoodItem/>
                    )
                })
            }


        </View>
    )
}

export default MyIssue
